<template>
  <div class="avatar" :style="{width:size + 'px', height: size + 'px',backgroundImage:'url('+ src +')'}">

    <slot></slot>
    <router-link :to="link" class="link" v-if="link!=''"></router-link>
  </div>
</template>

<script>
export default {
  name: 'avatar',
  props:{
      size : {
          type : Number,
          default : 40
      },
      src: String,
      link:{
          type:String,
          default:''
      }

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.avatar
  border-radius: 50%
  position: relative
  background-color: #f6f6f6
  background-position: center center
  background-repeat: no-repeat
  background-size: cover
  .badge
    position: absolute
    border: 2px solid #fff
    min-width: 10px
    text-align: center
    right: -10px
    top: -5px
    background: $red
    color: #fff
    font-size: $font-sm
    border-radius: 10px
    line-height: 16px
    padding: 0 4px
  .link
    position(absolute, 0 0 0 0)

</style>
